import React, { useEffect, useState } from 'react'
import { BorderBox1, Loading } from '@jiaminghi/data-view-react'
import Options from './options'
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
import './Rbcom.css'
import data from "./data"
import { connect } from 'dva';
import { isEmpty } from 'lodash';
import LoadSty from '../../../utils/hooks'


function Index({ getData }) {
    const [Load, setLoad] = useState('flex')

    const InitCreateApp = (config) => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('Rbcom'));
        // 绘制图表
        myChart.setOption(Options(config));
    }

    useEffect(() => {
        InitCreateApp(data)
    }, [])

    useEffect(() => {
        if (!isEmpty(getData)) {
            InitCreateApp(getData)
            setLoad('none')
        }
    }, [getData])

    return (
        <BorderBox1 style={{ width: 500, height: 400, margin: '50px 0px 25px 0' }}>
            <Loading style={LoadSty(Load)}>大数据计算加载中.....</Loading>
            <div id="Rbcom" style={{ width: 450, height: 400 }}></div>
        </BorderBox1>
    )
}

const mapStateToProps = ({ rightBottomPage }, ownProps) => {
    return {
        getData: rightBottomPage
    }
}

const A = connect(mapStateToProps)(Index)
export default A